<template>
	<view class="u-rela">
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="你的姓名">
				<u-input v-model="form.name" placeholder="请输入2-12个汉字或4-24个字母" />
			</u-form-item>
			<u-form-item label="性别">
				<u-radio-group v-model="form.sex">
					<u-radio :class="{active:form.sex==item.name}" v-for="(item, index) in sexList" :key="index"
						:name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="出生年月">
				<u-input placeholder="请选择" v-model="form.date" type="select" @click="dateShow = true" />
				<u-calendar v-model="dateShow" mode="date" @change="dateChange"></u-calendar>
				<!-- <u-action-sheet :list="jobTypeList" v-model="jobTypeShow" @click="jobTypeCallback"></u-action-sheet> -->
			</u-form-item>
			<u-form-item label="职位选择">
				<div class="u-input u-flex u-flex-wrap">
					<u-tag :text="item.title" type="info" closeable v-for="(item,index) in selectedList" :key="item.id" @close="tagClick(index)"/>
					<div class="icon-plus-wrap u-m-l-10" @click="selectZW">
						<u-icon name="plus"></u-icon>
					</div>
				</div>
			</u-form-item>
			<u-form-item label="薪资范围">
				<u-input placeholder="请选择" v-model="form.salary" type="select" @click="salaryShow = true" />
				<u-action-sheet :list="salaryList" v-model="salaryShow" @click="salaryCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="学历">
				<u-input placeholder="请选择" v-model="form.edu" type="select" @click="eduShow = true" />
				<u-action-sheet :list="eduList" v-model="eduShow" @click="eduCallback"></u-action-sheet>
			</u-form-item>
			<u-form-item label="工作经历">
				<u-input class="textarea" v-model="form.intro" type="textarea" />
			</u-form-item>
			<u-form-item label="联系电话">
				<u-input v-model="form.mobile" placeholder="请输入联系电话" />
			</u-form-item>
		</u-form>
		<div class="u-flex u-row-between u-m-t-60">
			<button class="u-reset-button btn btn-green" @click="get_recruit_editResume">提交</button>
			<button class="u-reset-button btn btn-gray" @click="resetting">重置</button>
		</div>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dateShow: false,
				form: {
					name: '',
					sex: '',
					date:'',
					address: '',
					salary: '',
					edu: '',
					jobType: '',
					mobile:'',
				},
				addressShow: false,
				sexList: [{
						name: '男',
						disabled: false,
					},
					{
						name: '女',
						disabled: false,
					}
				],
				salaryShow: false,
				salaryList: [
					// {
					// 	text: '5K-6K/月'
					// },
					// {
					// 	text: '5K-6K/月11'
					// },
					// {
					// 	text: '5K-6K/月22'
					// }
				],
				jobTypeShow: false,
				jobTypeList: [{
						text: '农业'
					},
					{
						text: '农业'
					},
					{
						text: '农业'
					}
				],
				eduShow: false,
				eduList: [
					// {
					// 	text: '本科'
					// },
					// {
					// 	text: '研究生'
					// },
					// {
					// 	text: '大专'
					// }
				],
				
				selectedList:[],
				id:'',
				category_id:''
			}
		},
		onLoad(options) {
			if(options.selected){
				this.selectedList = JSON.parse(options.selected)
			}
			if(options.id){
				this.id = options.id
			}
			if(options.category_id){
				this.category_id = options.category_id
			}
			
			// 薪资范围
			this.get_recruit_jobSalary();
			
			// 学历列表
			this.get_recruit_education();
		},
		methods: {
			// 删除tag
			tagClick(index) {
				this.selectedList.splice(index, 1)
			},
			
			selectZW() {
				uni.navigateTo({
					url: '/pages/recruit/zwSelect'
				})
			},
			dateChange(e) {
				console.log(e);
				this.form.date = e.result
			},
			// 点击actionSheet回调
			salaryCallback(index) {
				this.form.salary = this.salaryList[index].text;
			},
			// 点击actionSheet回调
			eduCallback(index) {
				this.form.edu = this.eduList[index].text;
			},
			
			// 性别处理函数
			handlerSex(sex){
				if(sex == '男'){
					return 1
				}else if(sex == '女'){
					return 2
				}else{
					return 0
				}
			},
			
			// 编辑简历
			get_recruit_editResume(){
				this.$http({
					url:this.api.recruit_editResume,
					method:'POST',
					data:{
						name:this.form.name,//姓名
						mobile:this.form.mobile,//电话
						gender:this.handlerSex(this.form.sex),//性别
						birthday:this.form.date,//生日
						category_id: this.category_id,//岗位分类ID
						salary:this.form.salary,//薪资
						education: this.form.edu,//学历
						content: this.form.intro,//工作经历
					}
				}).then(res=>{
					uni.navigateTo({
						url: `/pages/recruit/job/jl`
					})
				})
			},
			
			// 创建简历
			get_recruit_addResume(){
				this.$http({
					url:this.api.recruit_addResume,
					method:'POST',
					data:{
						name:this.form.name,//姓名
						mobile:this.form.mobile,//电话
						gender:this.handlerSex(this.form.sex),//性别
						birthday:this.form.date,//生日
						category_id: this.category_id,//岗位分类ID
						salary:this.form.salary,//薪资
						education: this.form.edu,//学历
						content: this.form.intro,//工作经历
					}
				}).then(res=>{
					uni.navigateTo({
						url: `/pages/recruit/job/jl`
					})
				})
			},
			
			// 学历列表
			get_recruit_education(){
				this.$http({
					url:this.api.recruit_education,
					method:'GET'
				}).then(res=>{
					if(res.code == 1){
						this.eduList = res.data.map(e=>{
							return {
								text:e
							}
						})
					}
				})
			},
			
			// 薪资范围
			get_recruit_jobSalary(){
				this.$http({
					url:this.api.recruit_jobSalary,
					method:'GET'
				}).then(res=>{
					if(res.code == 1){
						this.salaryList = res.data.map(e=>{
							return {
								text:e
							}
						})
					}
				})
			},
			
			// 重置
			resetting(){
				this.form.name = '';
				this.form.mobile = '';
				this.form.sex = '';
				this.form.date = '';
				this.form.salary = '';
				this.form.edu = '';
				this.form.intro = '';
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		width: 330rpx;
		height: 100rpx;
		background: #07C160;
		border-radius: 15rpx;
		font-size: 34rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-gray {
		background: #F3F3F3;
		border: 1px solid #DDDDDD;
		color: #999999;
	}

	.btn-green {
		background: #07C160;
		color: #FFFFFF;
	}

	/deep/ .u-border-bottom:after {
		border: 0;
	}

	/deep/ .u-form-item--left {
		margin-bottom: 0 !important;
	}

	/deep/ .u-form-item {
		padding: 10rpx 0 !important;
	}

	/deep/ .u-input {
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		padding: 0 30rpx !important;
		font-size: 28rpx;
		min-height: 88rpx;
	}

	/deep/ .u-input__input {
		min-height: 88rpx !important;
	}

	/deep/ .u-mode-light-info {
		padding: 12rpx 17rpx !important;
		border-radius: 8rpx !important;
		border: 0 !important;
		height: 66rpx !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center;
	}

	.textarea /deep/ .u-input {
		height: 180rpx;
		background: #F3F3F3;
		border: 1px solid #E6E6E6;
		border-radius: 10rpx;
		padding: 20rpx 30rpx !important;
	}

	.icon-plus-wrap {
		width: 100rpx;
		height: 66rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/ .u-radio__icon-wrap {
		display: none !important;
	}

	/deep/ .u-radio__label {
		width: 150rpx;
		height: 66rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active /deep/ .u-radio__label {
		background: #E6F8EE;
		color: #07C160;
	}
	
	u-tag{
		margin: 8rpx;
	}
</style>
<style>
	page {
		padding: 30rpx;
		background: #fff;
	}
</style>